
$(".webList li").on("click",function(){
    $(this).addClass("active").siblings().removeClass("active")
    console.log($(this).html())
    $(".top_tip span").html($(this).html())
})
//地图
var mapData=[
    {name: '北京',value: 0},
    {name: '天津',value: 0},
    {name: '上海',value: 0},
    {name: '重庆',value: 0 },
    {name: '河北',value: 0},
    {name: '河南',value:0 },
    {name: '云南',value: 0 },
    {name: '辽宁',value: 0 },
    {name: '黑龙江',value: 0 },
    {name: '湖南',value: 0 },
    {name: '安徽',value: 0 },
    {name: '山东',value: 0 },
    {name: '新疆',value: 0},
    {name: '江苏',value: 0 },
    {name: '浙江',value: 0 },
    {name: '江西',value: 0 },
    {name: '湖北',value: 0 },
    {name: '广西',value: 0 },
    {name: '甘肃',value: 0 },
    {name: '山西',value: 0 },
    {name: '内蒙古',value: 0 },
    {name: '陕西',value: 0 },
    {name: '吉林',value: 0 },
    {name: '福建',value: 0 },
    {name: '贵州',value: 0 },
    {name: '广东',value: 0 },
    {name: '青海',value: 0 },
    {name: '西藏',value: 0 },
    {name: '四川',value: 0 },
    {name: '宁夏',value: 0 },
    {name: '海南',value: 0 },
    {name: '台湾',value: 0 },
    {name: '香港',value: 0 },
    {name: '澳门',value: 0 }
]

var optionMap = {
    tooltip: {
        trigger: 'item',
        formatter:function(param){
            //return '<div>'+param.name+'APP违规数量：'+param.value+'</div>';
        }
    },
    geo: {
        map: 'china',
        label: {
          emphasis: {
            show: false
          }
        },
       // roam: true, //是否允许缩放
        zoom: 1.2,
        layoutSize: "100%",
        layoutCenter: ["55%", "50%"], //地图位置
        itemStyle: {
          normal: {
            /*shadowBlur: 30,
            shadowColor: 'rgba(0, 0, 0,0.8)',*/
            areaColor: '#022548',
            borderColor: '#0DABEA'
          },
          emphasis: {
            areaColor: '#011B34'
          }
        },
        regions: []
      },
    series: [{
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 5,
        symbolSize: 20,
        showEffectOn: 'render',
        rippleEffect: {
            brushType: 'stroke'
        },
        hoverAnimation: true,
        itemStyle: {
            normal: {
                color: '#ff0000',
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'top',
                show: true,
                textStyle:{
                	fontSize:14
                }
            },
            emphasis: {
                show: true
            }
        },
        data: [],
      },
      {
        name: '',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 4,
        data: [],
        symbolSize: 20,
        showEffectOn: 'render',
        rippleEffect: {
            brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}',
                position: 'top',
                show: true,
                textStyle:{
                	fontSize:14
                }
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#10de0c',
                shadowBlur: 10,
                shadowColor: '#333'
            }
        }
    },{
        zlevel: 3,
        type: 'map',
        mapType: 'china',
        layoutCenter: ["55%", "50%"], //地图位置
        layoutSize: "100%",
       // roam: true,
        zoom: 1.2,
        label: {
            normal: {
                show: false,
                textStyle: {
                    color: '#fff'
                }
            },
            emphasis: {
                show: false,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        itemStyle: {
            normal: {
                show:false,
                borderColor: '#1f446b',
                borderWidth: 1,
                areaColor: '#388ec7'
            },
            emphasis: {
                areaColor: '#fce24f',
                borderColor: '#fce24f'
            }
        },
        data:mapData
    },
    {
        name: '线路',
        type: 'lines',
        coordinateSystem: 'geo',
        zlevel: 53,
        large: true,
        effect: {
          show: true,
          constantSpeed: 30,
          symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          symbolSize: 8,
          trailLength: 0,
        },
        lineStyle: {
          normal: {
            color: 'yellow',
            width: 1,
           // type:'dashed',
            opacity: 0.6,
            curveness: 0.2
          }
        },
        data:[]
      }]
};
var mapChart = echarts.init(document.getElementById('APPChina'))
mapChart.setOption(optionMap)
window.addEventListener("resize", function () {
    mapChart.resize();
});

//假数据
var data_info = [
	['2017-5-24','21:40:57','河北','发现接入','中国电信股份有限公司河北分公司 中国电信廊坊市分公司IDC机房 124.238.232.224 接入','[115.4004,37.9688,95]','[115.4004,37.9688]'],
	['2017-5-24','22:56:48','河北','关停(封堵成功)','','[115.4004,37.9688,95]','[115.4004,37.9688]'],
	['2017-5-25','12:46:09','山西','发现接入','中国联合网络通信有限公司联通云数据有限公司 阳泉一枢纽IDC机房 124.166.242.155 接入','[112.4121,37.6611,95]','[112.4121,37.6611]'],
	['2017-5-26','1:29:39','山西','关停(封堵成功)','','[112.4121,37.6611,95]','[112.4121,37.6611]'],
	['2017-5-27','6:19:42','重庆','发现接入','中国联合网络通信有限公司重庆市分公司 重庆联通水土IDC机房 113.207.46.79 接入','[107.7539,30.1904,95]','[107.7539,30.1904]'],
	['2017-5-28','1:30:17','重庆','关停(封堵成功)','','[107.7539,30.1904,95]','[107.7539,30.1904]'],
	['2017-5-27','12:49:48','山东','发现接入','中国联合网络通信集团有限公司 山东联通莱芜市枢纽楼5楼IDC机房 119.167.151.226 接入','[118.7402,36.4307,95]','[118.7402,36.4307]'],
	['2017-5-28','18:55:46','山东','关停(封堵成功)','','[118.7402,36.4307,95]','[118.7402,36.4307]'],
	['2017-5-29','1:31:02','江苏','发现接入','中国电信集团公司 江苏常州环府路IDC数据中心 58.216.17.122 接入','[120.0586,32.915,95]','[120.0586,32.915]'],
	['2017-6-1','6:30:03','江苏','关停(封堵成功)','','[120.0586,32.915,95]','[120.0586,32.915]'],
	['2017-6-2','1:30:17','上海','发现接入','中国电信股份有限公司上海分公司 信息园区B15B机房 115.159.17.207 接入','[121.4648,31.2891,95]','[121.4648,31.2891]'],
	['2017-6-9','6:19:42','上海','关停(封堵成功)','','[121.4648,31.2891,95]','[121.4648,31.2891]'],
]
var n=0;
var timer
function auto(){
	if(n > data_info.length-1){
		//window.clearInterval(timer2)
		//console.log("放完了")
    clearInterval(timer);
		setTimeout(function(){
			n=0;
          optionMap.series[0].data=[]
	        optionMap.series[1].data=[]
	        optionMap.series[3].data=[]
	        mapChart.setOption(optionMap);
	        $(".detailBox").removeClass('zoomIn animated').addClass('zoomOut animated')
	        $('#box dl dd').html("")
	        auto()
          timer=window.setInterval(auto,3000);
		}, 10000);
    }
    for(var j=0;j<mapData.length;j++){
        mapData[j].selected = false;
    }
	for(var j=0;j<mapData.length;j++){
		if(data_info[n][2] == mapData[j].name){
            mapData[j].selected = true;
            if(data_info[n][3]=="发现接入"){
            	//$("#box").addClass("green").removeClass("red")
                optionMap.series[1].data=[{
                    name: data_info[n][2],
                    value: JSON.parse(data_info[n][5]),
                  }]
                mapChart.setOption(optionMap);
                if(n>1){
                	//console.log(n,33333333)   
                	clearInterval(timer);
                	setTimeout(function(){
                		//console.log(n,44444444444)
                		optionMap.series[3].data.push({
            				 fromName:data_info[n-2][2],
            	             toName:data_info[n][2-1],
            	             coords: [
            	            	 JSON.parse(data_info[n-2][6]),
            	            	 JSON.parse(data_info[n-1][6])
            	             ],
                          })
                          mapChart.setOption(optionMap);
                		timer=window.setInterval(auto,3000);
                	}, 1000);
                }
              
            	$('#box dl').prepend("<dd style='height:0px;' class='green'><div class='fg-left'>"+
                        "<h5>"+data_info[n][0]+"</h5>"+
                        "<p>"+data_info[n][1]+"</p></div>"+
                        "<div class='fg-center'>" +
                        "<div class='circle1'></div>" +
                        "<div class='circle2'></div>" +
                        "<div class='circle3'></div>" +
                        "<div class='center'></div>" +
                        "</div>"+
                        "<div class='fg-right'><h4>"+data_info[n][2]+"</h4>"+
                        '<p>'+data_info[n][3]+'：'+data_info[n][4]+'</p>'+
                        "</div></dd>");

            }else if(data_info[n][3]=="关停(封堵成功)"){
            	// $("#box").addClass("red").removeClass("green")
	                if(n<data_info.length-1){
	                	 optionMap.series[1].data=[]
	                     optionMap.series[0].data.push({
	                         name: data_info[n][2],
	                         value: JSON.parse(data_info[n][6]),
	                       })
	                       mapChart.setOption(optionMap);
	                	 
	                  	// console.log("连线")
	                  	/* if(data_info[n][1]!==data_info[n+1][1]){
	               			optionMap.series[3].data.push({
			      				 fromName:data_info[n][2],
			      	             toName:data_info[n+1][2],
			      	             coords: [
			      	            	 JSON.parse(data_info[n][6]),
			      	            	 JSON.parse(data_info[n+1][6])
			      	             ],
			                    })
			                    mapChart.setOption(optionMap);
	               		}*/
	                   }
                $('#box dl').prepend("<dd style='height:0px;' class='red'><div class='fg-left'>"+
                        "<h5>"+data_info[n][0]+"</h5>"+
                        "<p>"+data_info[n][1]+"</p></div>"+
                        "<div class='fg-center'>" +
                        "<div class='circle1'></div>" +
                        "<div class='circle2'></div>" +
                        "<div class='circle3'></div>" +
                        "<div class='center'></div>" +
                        "</div>"+
                        "<div class='fg-right'><h4>"+data_info[n][2]+"</h4>"+
                        '<p>'+data_info[n][3]+'：'+data_info[n][4]+'</p>'+
                        "</div></dd>");
            }/*else if(data_info[n][3]=="连线"){
            	optionMap.series[3].data.push({
      				 fromName:data_info[n][2],
      	             toName:data_info[n+1][2],
      	             coords: [
      	            	 JSON.parse(data_info[n][5]),
      	            	 JSON.parse(data_info[n][6])
      	             ],
                    })
                    mapChart.setOption(optionMap);
            }*/


            var _first=$('#box dl dd:first');
            _first.animate({height: '+95px'}, "slow");
           var _last=$('#box dl dd:last');
           _last.remove();
		}
	}
	//加入路线
    // console.log(data_info[n][1])
    // console.log(data_info[n+1][1])
	//console.log(n,data_info.length-1)
    
	n++;
}
auto();
timer=window.setInterval(auto,3000)

mapChart.on("click",function(param){
	if(param.seriesType=="effectScatter"){
		$(".detailBox ul").html("")
		$(".detailBox").fadeIn().removeClass('zoomOut animated').addClass('zoomIn animated')
		for(var i=0;i<data_info.length;i++){
			if(param.name==data_info[i][2]){
				$(".detailBox h3").html(param.name+"历史详情")

				 if(data_info[i][3]=="发现接入"){
            	    $(".detailBox ul").append("<li class='green'>" +
						"<h5>"+data_info[i][1]+"</h5>"+
						"<p>"+data_info[i][3]+":"+data_info[i][4]+"</p>"+
						"</li>")
				 }
				 else if(data_info[i][3]=="关停(封堵成功)"){
					 $(".detailBox ul").append("<li class='red'>" +
								"<h5>"+data_info[i][1]+"</h5>"+
								"<p>"+data_info[i][3]+":"+data_info[i][4]+"</p>"+
								"</li>")
				 }
			}
		}
	}
})

/*mapChart.on('mouseover',function(){
	clearInterval(timer)
})

mapChart.on('mouseout',function(){
	clearInterval(timer)
	timer=setInterval(auto,5000)
})
*/



